<template>
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <p>商家列表</p>
        </header>
        <!-- 商家列表部分 -->
        <ul class="business">
            <li v-for="item in businessArr" @click="toBusinessInfo(item.businessId)">
                <div class="business-img">
                    <img :src="item.businessImg">
                    <div class="business-img-quantity" v-show="item.quantity>0">{{item.quantity}}</div>
                </div>
                <div class="business-info">
                    <h3>{{item.businessName}}</h3>
                    <div class="business-info-star">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <p>4.8 月售600+单</p><!-- 教程数据库中无本数据 -->
                    </div>
                    <div class="business-info-delivery">起送&#165;{{item.startPrice}}&nbsp;|&nbsp;配送&#165;{{item.deliveryPrice}}</div>
                    <div class="business-info-explain">"{{item.businessExplain}}"</div>
                </div>
            </li>          
        </ul>
        <!-- 底部菜单部分 -->
        <Footer></Footer>
    </div>
</template>

<script>
    import Footer from '../components/Footer.vue';

    export default{
        name:'BusinessList',
        data(){
            return {
                orderTypeId: this.$route.query.orderTypeId,
                businessArr:[]
            }
        },
        created(){
            this.user = this.$getSessionStorage('user');

            //根据orderTypeId查询商家信息
            this.$axios.post('BusinessController/listBusinessByOrderTypeId',this.$qs.stringify({
                orderTypeId:this.orderTypeId
            })).then(response=>{
                this.businessArr = response.data;
                //判断是否登录
                if(this.user!=null){//已登录
                    this.listCart();
                }
            }).catch(error=>{
                console.error(error);
            });
        },
        components:{
            Footer
        },
        methods:{
            listCart(){
                this.$axios.post('CartController/listCart',this.$qs.stringify({
                    userId:this.user.userId
                })).then(response=>{
                    let cartArr = response.data;
                    //遍历商家列表
                    for(let businessItem of this.businessArr){
                        businessItem.quantity = 0;
                        for(let cartItem of cartArr){
                            if(cartItem.businessId==businessItem.businessId){
                                businessItem.quantity += cartItem.quantity;
                            }
                        }
                    }
                    this.businessArr.sort();
                }).catch(error=>{
                    console.error(error);
                });
            },

            toBusinessInfo(businessId){
                this.$router.push({path:'/businessInfo',query:{businessId:businessId}});
            }
        }
    }
</script>

<style scoped>
/* 总容器 */
.wrapper {
    width: 100%;
    height: 100%;
}

/* header */
.wrapper header {
    width: 100%;
    height: 12vw;
    background: #0097ff;
    color: #FFF;
    font-size: 4.8vw;

    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
/* 商家列表部分 */
.wrapper .business {
    width: 100%;
    margin-top: 12vw;
    margin-bottom: 14vw;
}

.wrapper .business li {
    width: 100%;
    box-sizing: border-box;
    padding: 2.5vw;
    border-bottom: solid 1px #DDD;
    user-select: none;
    cursor: pointer;

    display: flex;
    align-items: center;
}

.wrapper .business li .business-img {
    position: relative;
}

.wrapper .business li .business-img img {
    width: 20vw;
    height: 20vw;
}

.wrapper .business li .business-img .business-img-quantity {
    width: 5vw;
    height: 5vw;
    background-color: red;
    color: #FFF;
    font-size: 3.6vw;
    border-radius: 2.5vw;

    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    right: -1.5vw;
    top: -1.5vw;
}

.wrapper .business li .business-info {
    margin-left: 3vw;
}

.wrapper .business li .business-info h3 {
    font-size: 4.5vw;
    color: #555;
}

.wrapper .business-info .business-info-star {
    display: flex;
    align-items: center;
    margin-top: 1vw;
    margin-bottom: 1vw;
}

.wrapper .business-info .business-info-star .fa-star {
    color: #FEC80E;
    margin-right: 0.5vw;
}

.wrapper .business-info .business-info-star p {
    color: #666;
    margin-left: 1vw;
    font-size: 3.1vw;
}

.wrapper .business li .business-info .business-info-delivery {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2vw;

    color: #888;
    font-size: 3.1vw;
}

.wrapper .business li .business-info .business-info-explain {
    display: flex;
    align-items: center;
    margin-bottom: 1vw;
    background-color: #f0c49c;
    max-width: fit-content;
    font-size: 3.5vw;
}
</style>